<script setup lang="ts">
import { computed, ref } from 'vue';

const props = defineProps({
    src: {
        type: String,
        default: '',
    },
    height: {
        type: String,
        default: '24px',
    },
    width: {
        type: String,
        default: '',
    },
    color: {
        type: String,
        default: 'var(--cm8)',
    },
    showtype: {
        type: String,
        default: 'mask',
    },
    webty: {
        type: String,
        default: '',
    },
});
let errSrc: any = ref('');
// SRC
const iconSrc: any = computed(() => {
    if (errSrc.value) {
        return (
            './assets/' +
            (props.webty ?? +props.webty + '/') +
            'svg/' +
            errSrc.value +
            '.svg'
        );
    } else {
        return props.src.startsWith('http') ||
            props.src.endsWith('.svg') ||
            props.src.endsWith('.png')
            ? props.src
            : './assets/' +
                  (props.webty ?? +props.webty + '/') +
                  'svg/' +
                  props.src +
                  '.svg';
    }
});

function errorDo() {
    errSrc.value = 'default';
}
// mask
function iconStyleMask() {
    return {
        width: `${props.width ? props.width : props.height}`,
        height: `${props.height ? props.height : props.width}`,
        'background-color': `${props.color}`,
        'mask-image': `url('${iconSrc.value}')`,
        '-webkit-mask-image': `url('${iconSrc.value}')`,
    };
}
// filter
function iconStyleFilter() {
    return props.width
        ? {
              transform: 'translateX(-100%)',
              filter: `drop-shadow(${props.width} 0 ${props.color})`,
              width: `${props.width}`,
          }
        : {
              transform: 'translateY(-100%)',
              filter: `drop-shadow(0 ${props.height} ${props.color})`,
              height: `${props.height}`,
          };
}
</script>

<template>
    <i class="as-icon">
        <i v-if="showtype === 'filter'" class="as-icon-filter">
            <img :style="iconStyleFilter()" :src="iconSrc" @error="errorDo()" />
        </i>
        <i v-else class="as-icon-mask" :style="iconStyleMask()"></i>
    </i>
</template>

<style scoped lang="scss">
.as-icon {
    line-height: 0;
    display: inline-block;
    .as-icon-filter {
        font-style: normal;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        > img {
            position: relative;
            display: inline-block;
        }
    }
    .as-icon-mask {
        display: inline-block;
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%;
        mask-position: center center;
        -webkit-mask-position: center center;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        vertical-align: middle;
    }
}
</style>
